<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no,email=no"/>
    <meta name="apple-mobile-web-app-title" content="足彩"/>
    <title></title>
    <!--font-awsome-css-->
    <link rel="stylesheet" href="../public/styles/font-awesome.min.css">
    <!--bootstrap-->
    <link rel="stylesheet" href="../public/styles/bootstrap.min.css">
    <!--custom css-->
    <link rel="stylesheet" href="../public/styles/jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" href="../public/styles/index.css"/>
    <link rel="stylesheet" href="../public/styles/common.css">


</head>
<body>
<div class="masthead pdng-stn1">
    <!-- 内容开始 -->
    <div class="phone-box wrap push">
        <div style="position: fixed;top: 0;width: 100%;height: 98px">
            <div id="home" class="menu-notify">
                <div class="profile-left">
                    <a href="javascript:history.go(-1);" class="menu-link"><i class="fa fa-chevron-left"></i></a>
                </div>
                <div class="Profile-mid logo">
                    <h1>
                        <span class="link link--yaku">order</span>
                    </h1>
                </div>
                <div class="clearfix"></div>
            </div>
            <ul class="match-menu order-title">
                <li data-tid="2" class="active">Done</li>
                <li data-tid="1">Handling</li>
            </ul>
        </div>
        <div class="usercenter" style="margin-top: 98px">
            <div id="res-order"></div>
            <script type="text/template" charset="utf-8" id="tpl-order">
                {{? it.length}}
                <ul class="order-list">
                    {{~ it:value:index}}
                    <li>
                        <p class="p">{{= $.dateFmt(value.createTime, "yyyy-MM-dd hh:mm")}}</p>
                        <div class="order-li">
                            <h5>{{= value.selectionName}}</h5>
                            <p class="order-p">
                                {{= value.ruleTypeName}}
                                <br/>{{= value.homeTeam}} / {{= value.awayTeam}}</p>
                            <div>Betting<strong class="white">{{= $.numTofixed(value.orderMoney)}}</strong>
                                <p class="pull-right">
                                    {{? (value.orderState == "1" && value.isWin == "0") }}
                                    Possible Win
                                    {{??}}
                                    Gained
                                    {{?}}
                                    <strong class="orange">
                                        {{? (value.orderState == "5" || value.orderState == "4" || value.orderState
                                        == "3")
                                        || (value.orderState == "2" && value.isWin == "0") }}
                                        0
                                        {{??}}
                                        {{= $.numTofixed(value.orderMoney * value.orderOdds)}}
                                        {{?}}
                                    </strong></p>
                            </div>
                        </div>
                    </li>
                    {{~}}
                </ul>
                {{??}}
                <div class="no-order">
                    <img src="../public/images/no-data.png">
                    <p>No Data</p>
                </div>
                {{?}}
            </script>
        </div>
    </div>
</div>


<script type="text/javascript" src="../public/scripts/vendor/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../public/scripts/vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="../public/scripts/vendor/jquery.cookie.js"></script>
<script type="text/javascript" src="../public/scripts/vendor/doT.min.js"></script>
<script type="text/javascript" src="../public/scripts/common.js"></script>

<script type="text/javascript">
    $(document).ready(function () {

        $('.order-title').on('click', '[data-tid]', function () {
            var tid = $(this).attr('data-tid');
            $(this).addClass('active').siblings().removeClass('active');
            getInfo(tid);
        })
        getInfo(2);
        function getInfo(tid) {
            $.ajax({
                type: 'get',
                url: apiDomain + '/order/getOrderList?' + new Date().getTime(),
                dataType: "json",
                cache: false,
                data: {userId: $.cookie('userId'), state: tid},
                success: function (data) {
                    if (data.code == "0") {
                        var tpl = doT.template($("#tpl-order").html());
                        $("#res-order").html(tpl(data.results));
                    } else {

                    }
                }
            })
        }
    });

</script>
</body>
</html>